import { defineStore } from "pinia";

// 1.定义并导出容器
// 参数1：容器的ID,必须唯一，将来pinia会把所有的容器挂载到根容器
// 参数2：选项对象
// 返回值：一个函数，调用得到容器实例
export const mainStore = defineStore("main", {
  /*
   * 类似于组件的 data ，用于存储全局状态的
   * 1. 必须是函数，这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
   * 2. 必须是箭头函数，这是为了更好的 TS 类型推导
   *
   */
  state: () => {
    return {
      count: 1,
      phone: "18437754407",
    };
  },
  /*
   * 类似于组件的 computed，用于封装计算属性，有缓存功能
   */
  getters: {
    phoneHidden(state) {
      return state.phone + "getters";
    },
  },
  /*
   * 类似于组件的 methods，封装业务逻辑，修改 state
   */
  actions: {
    add(v) {
      this.count += v;
    },
  },
});
